<script setup lang="ts" name="permissionUser">
import { userHandle } from '@/hooks/permission/userHandle'

const {
    // 获取列表
    loading,  //表格加载中
    selectRoleValue, //选中角色
    roleAllListData, //所有角色列表
    tableData, //表格数据
    pageTotal, //数据总条数
    getData,    //分页信息
    handleCurrentChange, // 页码改变重新请求列表

    // 按钮操作
    drawer,    //是否显示抽屉弹窗
    typeIndex, //抽屉弹窗标题下标
    handleType, //抽屉弹窗标题下标对应的标题
    showDrawer, // 点击添加用户按钮显示抽屉弹窗
    handleClose, // 右上角关闭抽屉弹窗
    cancelClick, // 点击抽屉弹窗底部关闭按钮隐藏弹窗
    formData, //表单数据
    formRef, // 表单对象
    rules, //表单规则
    submitForm, //提交表单
    delMenu, //删除菜单
    isShowChange, // 是否开启
    selectRoleChange //切换角色
} = userHandle();

</script>

<template>
    <div style="text-align: center; color: #666;">
        <div v-permissionList="'listUser'">
            <el-card shadow="never" style="text-align: right;" v-permission="'addUser'"> 
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" @click="showDrawer(0)">新增用户</el-button>
                    </el-col>
                </el-row>
            </el-card>
            <el-card shadow="never">
                <el-table :data="tableData" v-loading="loading" row-key="id" border v-permission="'listUser'">
                    <el-table-column prop="id" label="编码" width="60" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column label="所属角色">
                        <template #default="scoped">
                            <el-select v-model="scoped.row.role_name" placeholder="请选中" value-key="id" @change="selectRoleChange($event, scoped.row)" :data-value="scoped.row.role_name" v-permissionSelect="'changeUserRole'">
                                <el-option v-for="item in roleAllListData" :key="item.id" :label="item.name" :value="item" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否开启" sortable>
                        <template #default="scoped">
                            <el-switch v-model="scoped.row.switch" @change="isShowChange($event, scoped.row)"
                                v-permissionSwitch="'userIsShow'" :data-value="scoped.row.switch" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="createtime" label="添加时间" />
                    <el-table-column fixed="right" label="操作" width="220">
                        <template #default="scoped">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="showDrawer(1, scoped.row)"
                                    v-permission="'editUser'">编辑</el-button>
                                <el-button type="danger" size="small" @click="delMenu(scoped.row)"
                                    v-permission="'delUser'">删除</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="never">
                <el-pagination background layout="prev, pager, next" :page-size="getData.size" :total="pageTotal"
                    @currentChange="handleCurrentChange" />
            </el-card>
        </div>
    </div>
    <!-- 抽屉弹出 -->
    <el-drawer v-model="drawer" :before-close="handleClose" v-if="drawer">
        <template #header>
            <h4>{{ handleType[typeIndex] }}</h4>
        </template>
        <template #default>
            <div>
                <el-form ref="formRef" :model="formData" :rules="rules" hide-required-asterisk>
                    <el-form-item label="用户名称" prop="name">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                    <el-form-item label="用户密码" prop="pwd">
                        <el-input type="password" v-model="formData.pwd" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repwd">
                        <el-input type="password" v-model="formData.repwd" />
                    </el-form-item>
                    <el-form-item label="所属角色" prop="r_id">
                        <el-select v-model="selectRoleValue" placeholder="请选中" value-key="id">
                            <el-option v-for="item in roleAllListData" :key="item.id" :label="item.name"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="formData.is_show" />
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">关闭</el-button>
                <el-button type="primary" @click="submitForm(formRef)">{{ handleType[typeIndex] }}</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="scss">
.del-bnt {
    margin-bottom: 10px;
}
</style>